<template>
  <view class="container">
    <ve-form>
      <ve-card type="none">
        <ve-form-item label="催缴状态">
          <view style="color: rgba(48, 114, 246, 1)">{{ statusName }}</view>
        </ve-form-item>
        <ve-form-item label="添加标签">
          <ve-checkbox v-model="form.cooperateHandleState" name="承租人不配合处理违章"> 承租人不配合处理违章 </ve-checkbox>
        </ve-form-item>
        <ve-form-item label="催缴说明" labelPosition="top" v-for="(ele, j) in form.formList" :key="j" :borderBottom="false">
          <ve-input type="textarea" v-model="ele.description" :maxlength="10" placeholder="请输入催缴说明" />
        </ve-form-item>
        <view class="ve-form-item-btn" @click="handleAdd" v-if="statusName == '已催缴'">
          <ve-icon name="plus" size="30"></ve-icon>
          <span class="ve-form-item-btn-text">添加催缴说明</span>
        </view>
      </ve-card>

      <template v-if="form.descList.length">
        <ve-card :title="getTitle(index)" type="none" v-for="(item, index) in form.descList" :key="index">
          <template #noneCaseSubTitle>
            <view class="desc_subTitle" @click="handleDeleteHis(index)">
              <text>已催缴</text>
              <ve-icon name="delete_1" color="#171616" size="30" />
            </view>
          </template>
          <ve-cell label="操作人">{{ item.createUserName || '-' }}</ve-cell>
          <ve-cell label="时间">{{ item.createTime || '-' }}</ve-cell>
          <ve-cell label="催缴说明">{{ item.description || '-' }}</ve-cell>
        </ve-card>
      </template>
      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" @click="handleSave">确认</ve-button>
      </ve-bottom-box>
    </ve-form>
  </view>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { checkCallRecord, saveCall } from '@/api/asset/car-violation'

  const rules = reactive([
    {
      prop: 'licenseNo',
      required: true,
      message: '请选择车牌号',
    },
    {
      prop: 'eventTime',
      required: true,
      message: '请选择违章时间',
    },
    {
      prop: 'handleType',
      required: true,
      message: '请选择处理方',
    },
    {
      prop: 'violationDepositType',
      required: true,
      message: '请选择违章费是否支持押金自动抵扣',
    },
  ])

  const form = ref({
    formList: [{ description: '' }],
    descList: [],
  })

  const getTitle = (e) => {
    let title = '催缴记录'
    let count = form.value.descList.length - e
    let result = title + count
    return result
  }

  const handleSave = () => {
    const params = {
      violationId: form.value.violationId,
      cooperateHandleState: form.value.cooperateHandleState ? 0 : 1,
      urgeList: form.value.descList.concat(form.value.formList.filter((item) => item.description)),
    }
    saveCall(params).then((res) => {
      if (res.code == 200) {
        uni.showToast({
          title: '操作成功',
          icon: 'none',
        })
        uni.$emit('refreshData')
        uni.navigateBack({
          delta: 1,
        })
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
      }
    })
  }

  const statusName = ref('')
  const getDetail = async (record) => {
    const res = await checkCallRecord({ id: record.id })
    if (res.code === 200) {
      const data = res.result
      form.value.cooperateHandleState = record.cooperateHandleState == 0 ? true : false
      form.value.violationId = data.violationId
      form.value.descList = data.urgeList || []
      statusName.value = data.urgePayStatus == 1 ? '已催缴' : '待催缴'
    }
  }

  const handleAdd = () => {
    form.value.formList.push({})
  }

  const handleDelete = (e) => {
    form.value.formList.splice(e, 1)
  }

  const handleDeleteHis = (e) => {
    form.value.descList.splice(e, 1)
  }
  onLoad((record) => {
    if (record.id) {
      getDetail(record)
    }
  })
</script>

<style lang="scss" scoped>
  .container {
    padding: 24rpx;
    background: #f7f8fa;
  }
  .subTitle {
    position: absolute;
    top: 36rpx;
    right: 0;
    color: #f53f3f;
    display: flex;
    align-items: center;
    text {
      margin-left: 14rpx;
    }
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    margin-bottom: 32rpx;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .desc_subTitle {
    display: flex;
    align-items: center;
    text {
      color: rgba(48, 114, 246, 1);
      font-size: 28rpx;
      margin-right: 18rpx;
    }
  }
</style>
